<!--suppress JSUnresolvedVariable, HtmlUnknownTarget -->
<template>
  <el-drawer title="商品审核" :visible.sync="drawerVisible" direction="rtl" :append-to-body="true"
             size="70%" @open="handleDrawerOpen">
    <el-form ref="checkForm" :model="checkForm" :rules="checkTypeRuler" label-width="120px" :disabled="checkDisabled">
      <el-row :gutter="10">
        <!--suppress HtmlDeprecatedAttribute -->
        <el-col align="left" :span="8" style="padding: 10px 20px">
          <el-radio v-model="checkType" :label="true">审核通过</el-radio>
          <el-radio v-model="checkType" :label="false">审核失败</el-radio>
        </el-col>
        <el-col :span="8">
          <el-form-item label="审核错误信息" prop="message">
            <el-input v-model="checkForm.message"/>
          </el-form-item>
        </el-col>
        <!--suppress HtmlDeprecatedAttribute -->
        <el-col :span="8" align="right">
          <el-button @click="handleClose">关闭</el-button>
          <el-button style="margin-right: 20px" type="primary" @click="handleSubmit"
                     :loading="checkLoading">提交审核</el-button>
        </el-col>
        </el-row>
      </el-form>
    <el-form label-width="100px" style="padding: 10px" :disabled="true">
      <el-collapse v-model="activeNames" :accordion="true">
        <el-collapse-item :name="1">
          <template slot="title">
            <span style="font-size: 16px">商品基础信息</span>
          </template>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="商品编号" prop="id">
                <el-input v-model="form.id"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="商品名称" prop="name">
                <el-input v-model="form.name"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="商品分类" prop="goodCategoryName">
                <el-input v-model="form.goodCategoryName"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="商品名称" prop="name">
                <el-input v-model="form.name"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="店铺编号" prop="storeId">
                <el-input v-model="form.storeId"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="店铺名称" prop="storeName">
                <el-input v-model="form.storeName"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建人编号" prop="createUserId">
                <el-input v-model="form.createUserId"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建人名称" prop="createUserName">
                <el-input v-model="form.createUserName"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建时间" prop="createTime">
                <el-input v-model="form.createTime"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="商品卖点" prop="sellPoint">
                <el-input v-model="form.sellPoint"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="商品运费" prop="freight">
                <el-input v-model="form.freight"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="简要描述" prop="simpleDesc">
                <el-input v-model="form.simpleDesc"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="详细描述" prop="description">
                <el-input v-model="form.description"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审核人员编号" prop="checkUserId">
                <el-input v-model="form.checkUserId"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审核人员名称" prop="checkUserName">
                <el-input v-model="form.checkUserName"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审核时间" prop="checkTime">
                <el-input v-model="form.checkTime"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item :name="2">
          <template slot="title">
            <span style="font-size: 16px">商品图片</span>
          </template>
          <el-row :gutter="10">
            <img class="image" :alt="item.id" :src="item.image"
                 v-for="(item, index) in form.goodPictureList" :key="index"/>
          </el-row>
        </el-collapse-item>
        <el-collapse-item :name="3">
          <template slot="title">
            <span style="font-size: 16px">子商品信息</span>
          </template>
          <el-row :gutter="10" v-for="item in form.subGoodList" :key="item.id">
            <el-col :span="8">
              <el-form-item label="子商品编号">
                <el-input v-model="item.id"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="子商品名称">
                <el-input v-model="item.subGoodName"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="数量">
                <el-input v-model="item.count"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="单价">
                <el-input v-model="item.price"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="原价">
                <el-input v-model="item.oldPrice"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建时间">
                <el-input v-model="item.createTime"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建人员编号">
                <el-input v-model="item.createUserId"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建人员名称">
                <el-input v-model="item.createUserName"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="描述">
                <el-input v-model="item.description"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="备注">
                <el-input v-model="item.remark"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item :name="4">
          <template slot="title">
            <span style="font-size: 16px">店铺信息</span>
          </template>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="店铺编号">
                <el-input v-model="store.id"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="店铺名称">
                <el-input v-model="store.name"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="简要描述">
                <el-input v-model="store.simpleDescription"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="详细描述">
                <el-input v-model="store.description"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系方式1">
                <el-input v-model="store.phone1"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系方式2">
                <el-input v-model="store.phone2"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="邮箱">
                <el-input v-model="store.email"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="微信">
                <el-input v-model="store.weChat"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="QQ">
                <el-input v-model="store.qq"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="店铺位置">
                <el-input v-model="store.address"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="营业执照编号">
                <el-input v-model="store.businessId"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="税务编号">
                <el-input v-model="store.taxId"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="支付方式">
                <el-input v-model="store.payType"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="支付账号">
                <el-input v-model="store.payAccount"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="押金">
                <el-input v-model="store.money"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="网址">
                <el-input v-model="store.website"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建时间">
                <el-input v-model="store.createTime"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="店铺状态">
                <el-input v-model="store.state"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="备注">
                <el-input v-model="store.remark"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审核人员编号">
                <el-input v-model="store.checkUserId"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审核人员名称">
                <el-input v-model="store.checkUserName"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审核时间">
                <el-input v-model="store.checkTime"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
      <el-row :gutter="10">

      </el-row>
    </el-form>
  </el-drawer>
</template>

<script>
import { queryGoodDetailByIdAdmin } from '@/api/ApiGoodDetail'
import { ResultCode } from '@/constants/constants'
import { queryAdminInfoByPageWrapper } from '@/api/ApiStore'
import PageDTO from '@/api/entity/PageDTO'
import StoreInfoQueryDTO from '@/api/entity/StoreInfoQueryDTO'
import { formatTime } from '@/utils/ConvertUtils'
import { checkingGoods } from '@/api/ApiGoods'
import AdminCheckingDTO from '@/api/entity/AdminCheckingDTO'

export default {
  name: 'GoodCheckDrawer',
  props: {
    visible: {
      require: true,
      type: Boolean
    },
    goodId: {
      require: true,
      type: [Number, String]
    }
  },
  model: {
    prop: 'visible',
    event: 'visible'
  },
  data () {
    return {
      queryLoading1: false,
      queryLoading2: false,
      checkLoading: false,
      drawerVisible: false,
      checkDisabled: false,
      checkType: true,
      activeNames: [1],
      checkForm: {
        message: ''
      },
      form: {},
      store: {}
    }
  },
  computed: {
    checkTypeRuler () {
      return this.checkType ? {
        message: []
      } : {
        message: [{ required: true, message: '商品名称不能为空', trigger: 'blur' }]
      }
    },
    queryLoading () {
      return this.queryLoading1 || this.queryLoading2
    }
  },
  methods: {
    handleClose () {
      this.drawerVisible = false
    },
    handleSubmit () {
      if (this.checkType !== true && this.checkType !== false) {
        this.$message.error('请先选择审核结果')
        return
      }
      this.$refs['checkForm'].validate(success => {
        if (success) {
          const param = AdminCheckingDTO.instance()
          this.checkLoading = true
          param.setId(this.goodId)
          param.setSuccess(this.checkType)
          if (this.checkForm.message) {
            param.setMessage(this.checkForm.message)
          } else {
            param.setMessage('')
          }
          checkingGoods([param], data => {
            if (data && data.code === ResultCode.OK) {
              this.$message.success('提交审核数据成功')
              this.checkDisabled = true
              this.$emit('change', param.success)
            }
          }, () => {
            this.checkLoading = false
          })
        }
      })
    },
    resetDrawer () {
      this.activeNames = [1]
      this.checkType = true
      this.checkForm.message = ''
      this.checkDisabled = false
    },
    handleDrawerOpen () {
      this.resetDrawer()
    },
    convertData (data) {
      data.createTime = formatTime(data.createTime)
      data.checkTime = formatTime(data.checkTime)
      if (data.subGoodList && typeof data.subGoodList === 'object') {
        for (let i = 0; i < data.subGoodList.length; i++) {
          data.subGoodList[i].createTime = formatTime(data.subGoodList[i].createTime)
        }
      }
      return data
    },
    convertStoreData (data) {
      data.createTime = formatTime(data.createTime)
      return data
    },
    freshData () {
      const vm = this
      vm.queryLoading1 = true
      queryGoodDetailByIdAdmin(vm.goodId, data => {
        if (data && data.code === ResultCode.OK) {
          vm.form = vm.convertData(data.object)

          vm.queryLoading2 = true
          const pageDTO = PageDTO.instance()
          pageDTO.setCurrent(1)
          pageDTO.setSize(1)
          const wrapper = StoreInfoQueryDTO.instance()
          wrapper.setId(data.object['storeId'])
          pageDTO.setCondition(wrapper)
          queryAdminInfoByPageWrapper(pageDTO, data2 => {
            if (data2 && data2.code === ResultCode.OK) {
              const storeData = data2.object['records']
              if (storeData && typeof storeData === 'object' && storeData.length >= 1) {
                vm.store = vm.convertStoreData(storeData[0])
              }
            }
          }, () => {
            vm.queryLoading2 = false
          })
        }
      }, () => {
        vm.queryLoading1 = false
      })
    }
  },
  watch: {
    drawerVisible (val) {
      this.$emit('visible', val)
    },
    visible (val) {
      if (val !== this.drawerVisible) {
        this.drawerVisible = val
      }
    },
    goodId () {
      this.freshData()
    },
    checkType () {
      this.$refs['checkForm'].clearValidate()
      this.$refs['checkForm'].resetField()
    }
  }
}
</script>

<style>

  /*noinspection ALL*/
  .el-drawer__body{
    overflow-y: scroll;
  }

</style>

<style scoped>
  .image{
    height: 168px;
    width: 168px;
    margin: 10px;
  }
</style>
